<!-- pages/login/index.vue -->
<script setup>
import { ref, computed } from 'vue';
// 导入组件
import customPassword from './components/password.vue';
import customMobile from './components/mobile.vue';
// 标签页要展示的内容
const tabMetas = [
  { title: '密码登录', subTitle: '验证码登录' },
  { title: '验证码登录', subTitle: '密码登录' }
];
// 标签页的索引值
const tabIndex = ref(1);
//  根据索引值决定当前标签展示的内容
const tabMeta = computed(() => {
  return tabMetas[tabIndex.value];
});
// 点击切换标签展示的内容
function onSubTitleClick() {
  tabIndex.value = Math.abs(tabIndex.value - 1);
}
</script>
<template>
  <view class="user-login">
    <view class="login-type">
      <view class="title">{{ tabMeta.title }}</view>
      <view class="type">
        <text @click="onSubTitleClick">{{ tabMeta.subTitle }}</text>
        <uni-icons color="#3c3e42" type="forward" />
      </view>
    </view>
    <!-- 用户名&密码方式 -->
    <custom-password v-if="tabIndex === 0" />
    <!-- 短信验证码方式 -->
    <custom-mobile v-if="tabIndex === 1" />
  </view>
  <!-- 社交账号登录 -->
  <view class="social-login">
    <view class="legend">
      <text class="text">其它方式登录</text>
    </view>
    <view class="social-account">
      <view class="icon">
        <uni-icons color="#00b0fb" size="30" type="qq" />
      </view>
      <view class="icon">
        <uni-icons color="#fb6622" size="30" type="weibo" />
      </view>
      <view class="icon">
        <uni-icons color="#07C160" size="30" type="weixin" />
      </view>
    </view>
  </view>
</template>

<style lang="scss">
@import './index.scss';
</style>
